<template>
  <a-drawer
    :visible="visible"
    :title="title"
    width="1100"
    :footer-style="{ textAlign: 'right' }"
    :bodyStyle="{
      background: '#f9fafb',
    }"
    @close="onClose"
  >
    <a-form
      :label-col="{
        span: 2,
      }"
    >
      <a-row :gutter="[16, 16]">
        <a-col>
          <a-form-item>
            <a-select
              v-model:value="modelRef.authorizationStatus"
              placeholder="请选择授权状态"
              :options="authorizationOptions"
              style="width: 276px"
              allowClear
            ></a-select>
          </a-form-item>
        </a-col>
        <a-col>
          <a-form-item>
            <a-input
              v-model:value="modelRef.accountNumber"
              placeholder="请输入要搜索的账号"
              style="width: 276px"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-table
      :dataSource="dataSource"
      :columns="columns"
      :pagination="pagination"
      @change="handleTableChange"
      :loading="loading"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
    >
      <template #bodyCell="{ column }">
        <template v-if="column.key == 'avatar'">
          <a-image
            :width="55"
            src="https://p3.douyinpic.com/aweme/100x100/aweme-avatar/tos-cn-avt-0015_33d2790c7feb98169ea5bee65b4a285d.jpeg?from=4010531038"
          />
        </template>
      </template>
    </a-table>
    <template #footer>
      <a-button
        type="primary"
        ghost
        style="
          margin-right: 8px;
          border: 1px solid #e0e0e6;
          color: #000;
          border-radius: 6px;
        "
        @click="onClose"
        >取消</a-button
      >
      <a-button
        type="primary"
        style="background: #2878FF; border: none; border-radius: 6px"
        @click="onConfirm"
      >
        保存
      </a-button>
    </template>
  </a-drawer>
</template>

<script>
import { defineComponent, reactive, toRefs, computed } from "vue";
import {} from "@ant-design/icons-vue";
import { Form } from "ant-design-vue";
const useForm = Form.useForm;

export default defineComponent({
  name: "AddGrouping",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: 0,
    },
  },
  components: {},
  setup(props, { emit }) {
    const state = reactive({
      count: 0,
      authorizationOptions: [
        {
          label: "已授权",
          value: "1",
        },
        {
          label: "授权过期",
          value: "2",
        },
        {
          label: "删除授权",
          value: "3",
        },
      ],

      dataSource: [{ id: "12" }],

      columns: [
        {
          title: "分组",
          dataIndex: "group",
          key: "group",
        },
        {
          title: "ID",
          dataIndex: "id",
          key: "id",
        },
        {
          title: "头像",
          dataIndex: "avatar",
          key: "avatar",
        },
        {
          title: "账号",
          dataIndex: "account",
          key: "account",
        },
        {
          title: "粉丝数",
          dataIndex: "fansNum",
          key: "fansNum",
          sort: true,
        },
        {
          title: "分享数",
          dataIndex: "shareNum",
          key: "shareNum",
          sort: true,
        },
        {
          title: "点赞数",
          dataIndex: "likeCount",
          key: "likeCount",
          sort: true,
        },
        {
          title: "授权状态",
          dataIndex: "empowerStatus",
          key: "empowerStatus",
        },
        {
          title: "授权能力",
          dataIndex: "capability",
          key: "capability",
        },
      ],

      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      selectedRowKeys: [],
    });

    const modelRef = reactive({
      authorizationStatus: undefined,
      accountNum: "",
    });
    const rulesRef = reactive({
      authorizationStatus: [
        {
          required: false,
          message: "请选择平台",
        },
      ],
      accountNum: [
        {
          required: false,
          message: "请输入分组名称",
        },
      ],
    });
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );

    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
    }));

    const handleTableChange = (pager, filters, sorter) => {
      state.page = pager.current;
      state.pageSize = pager.pageSize;
    };

    const onSelectChange = (selectedRowKeys) => {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      state.selectedRowKeys = selectedRowKeys;
    };

    const addAccount = () => {
      validate().then(() => {});
    };

    const onClose = () => {
      resetFields();
      emit("onCancel");
    };

    const onConfirm = () => {
      emit("onConfirm");
    };

    const title = computed(() => {
      return props.id ? "编辑账号" : "添加账号";
    });

    return {
      title,
      ...toRefs(state),
      onConfirm,
      onClose,
      validateInfos,
      resetFields,
      modelRef,
      addAccount,
      pagination,
      handleTableChange,
      onSelectChange,
    };
  },
});
</script>

<style lang="less" scoped></style>
